<template>
    <template v-if="!file.isHidden">
        <div
            class="group file-item p-0.5 px-2 mb-1 cursor-default border-solid border-transparent border-1 hover:bg-blue-50 flex items-center select-none"
            :class="{
                '!border-blue-400 !bg-blue-200': isSelected,
                'w-[150px] flex-col m-1': viewType === 'grid'
            }"
            @click="emit('click', file)"
            @dblclick="emit('dblclick', file)"
            :data-filename="file.name"
            :data-path="file.path"
            :data-file-explorer-id="fileExplorerId"
            v-droppable="filesVDroppable"
        >
            <div
                class="icon mr-1 flex-shrink-0"
                :class="{
                    'w-[20px] h-[20px]': viewType === 'list',
                    'w-[100px] h-[100px]': viewType === 'grid'
                }"
            >
                <FileIcon :file="file" />
            </div>
            <div
                class="filename flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
                @mousedown="emit('click', file)"
            >
                <el-input
                    v-if="isRenaming"
                    v-model="editingFilename"
                    size="small"
                    @blur="handleRenameEnd"
                    autofocus
                    @keydown.enter="handleRenameEnd"
                    @keydown.esc="isRenaming = false"
                />
                <span v-else>{{ file.name }}</span>
            </div>
            <el-dropdown
                v-if="!isRenaming"
                placement="bottom"
                class="hidden group-hover:block px-1 ml-auto flex justfy-center items-center cursor-pointer bg-opacity-5 hover:bg-slate-200 rounded"
                :teleported="false"
            >
                <el-icon>
                    <MoreFilled />
                </el-icon>

                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleRename">重命名</el-dropdown-item>
                        <el-dropdown-item @click="handleDelete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!-- <template v-if="viewType === 'list'">
                <div class="createTime text-gray-400">
                    {{ file.createTime }}
                </div>
            </template> -->
        </div>
    </template>
</template>

<script setup lang="ts">
import { IFileItem } from '@/appUtils/fs'
import { dirname, join } from '@/appUtils/path'
import { computed, ref, toRefs } from 'vue'
import { vDroppable } from '../../DragAndDrop/vDroppable'
import { filesVDroppable } from '../utils/dropHandlers'
import FileIcon from './FileIcon.vue'
import { ElMessageBox } from 'element-plus'
// console.log(fileExtensions)

const props = withDefaults(
    defineProps<{
        /** 文件 */
        file: IFileItem
        /** 是否是选中状态 */
        isSelected?: boolean
        /** 预览形式 */
        viewType?: 'list' | 'grid'
        /** 文件浏览器id */
        fileExplorerId?: string
    }>(),
    {
        isSelected: false,
        viewType: 'list',
        fileExplorerId: ''
    }
)
const isRenaming = ref(false)
const editingFilename = ref(props.file.name)
const { file, viewType, fileExplorerId } = toRefs(props)
const isSelected = computed(() => {
    // console.log(props.isSelected, props.file.name)
    return props.isSelected
})

const emit = defineEmits(['click', 'dblclick', 'rename', 'delete'])

const handleRename = () => {
    isRenaming.value = true
}

const handleRenameEnd = async () => {
    isRenaming.value = false
    const oldPath = props.file.path
    const dir = dirname(oldPath)
    const newName = editingFilename.value
    const newPath = join(dir, newName)
    emit('rename', oldPath, newPath)
}

const handleDelete = async () => {
    const confirm = await ElMessageBox.confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
    if (confirm === 'confirm') {
        emit('delete', props.file.path)
    }
}
</script>

<style scoped></style>
